<template>
	<view class="safe-area-inset-bottom editVideo">
		<view class="video_class" @click="!src ? chooseV() : ''">
			<u-icon v-if="!src" name="plus" color="#C5C5C5" size="80"></u-icon>
			<video v-else :src="src" style="height: 400rpx;width: 690rpx;" controls></video>
		</view>
		<view class="right_btn" v-if="src">
			<view class="btn_text" @click="deleteVideo">删除</view>
			<view class="btn_text btn_active" @click="chooseV">更改</view>
		</view>
		<view class="submit_btn">
			<u-button type="error" :custom-style="{backgroundColor: '#F56B79'}" @click="saves">保存</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import API_PERSONAL from '../../api/personal.js'
	import { uploadFiles } from '../../config/util.js'
	export default {
		data() {
			return {
				src: '',
				sort: 1,
				edit: true
			}
		},
		onLoad(option) {
			
		},
		methods: {
			chooseV() {
				uni.chooseVideo({
					sourceType: ['album'],
					maxDuration: 60,
					camera: 'back',
					success: (res) => {
						this.src = ''
						this.src = res.tempFilePath
					}
				})
			},
			deleteVideo() {
				this.src = ''
			},
			async saves() {
				if(!this.src) {
					this.$refs.uToast.show({
						title: '请上传视频',
						type: 'warning',
					})
					return
				}
				let path = await uploadFiles([{
					src: this.src,
					name: this.src,
					uploaded: false
				}])
				let data = {
					video_url: [path[0]],
				}
				let res = await API_PERSONAL.AddVideo(data)
				this.$refs.uToast.show({
					title: '上传成功',
					type: 'success',
					back: true
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.editVideo {
		background-color: #FFFFFF;
		min-height: 100vh;
		
		.video_class {
			height: 400rpx;
			margin: 30rpx;
			background-color: #F3F3F3;
			border-radius: 8rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.right_btn {
			margin: 18rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			
			.btn_text {
				color: #F56B79;
				font-size: 28rpx;
				margin-right: 52rpx;
			}
			
			.btn_active {
				color: #fff;
				background-color: #F56B79;
				padding: 4rpx 35rpx;
				border-radius: 30rpx;
				margin-right: 0;
			}
		}
		
		.submit_btn {
			margin-top: 228rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
		}
	}
 </style>
